<template>
  <div class="home-wrapper">
    <Card :dis-hover="true">
      <Card :dis-hover="true" style="padding:10px;margin-bottom:20px;">
        <!-- 搜索框 -->
        <Form :model="formSearch" label-position="right" label-colon :label-width="80">
          <Row :gutter="10">
            <Col :xs="24" :sm="24" :md="12" :lg="6">
              <FormItem label="配置域">
                <Select v-model="formSearch.name" clearable placeholder="请选择配置域">
                  <Option v-for="item in configList" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col :xs="24" :sm="24" :md="12" :lg="6">
              <FormItem label="配置名称">
                <Input clearable v-model="formSearch.key" placeholder="请输入配置名称"/>
              </FormItem>
            </Col>
            <Col :xs="24" :sm="24" :md="12" :lg="6">
              <Button type="primary" @click="querySearch" shape="circle" icon="ios-search">查询</Button>
            </Col>
          </Row>
        </Form>
        <div class="tool-box">
          <Tooltip content="表示所属应用的配置文件名称">
            <Button type="primary" icon="md-add" ghost @click="addModel = true">添加配置域</Button>
          </Tooltip>
          <Tooltip content="表示配置的key">
            <Button type="error" icon="md-add" ghost  @click="addModelConfig = true" style="margin-left:10px;">添加配置 key</Button>
          </Tooltip>
        </div>
      </Card>
      <Table @on-contextmenu="handleContextMenu" context-menu show-context-menu border max-height="480" :loading="loading" :columns="columns" :data="tableData">
        <template slot="contextMenu">
          <DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
          <DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
        </template>
      </Table>
    </Card>
    <!-- 加载等待 -->
    <Spin fix v-show="show">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>加载中...</div>
    </Spin>

    <div class="edit-config">
      <Modal
        v-model="editModel"
        title="修改配置信息"
        @on-ok="handleEdit"
        @on-cancel="cancelEdit"
      >
        <Form ref="formInlineEdit" label-colon :label-width="85" :model="formEdit" :rules="ruleInline">
          <FormItem label="配置域">
            <Input v-model="formEdit.name" readonly/>
          </FormItem>
          <FormItem label="key" prop="key">
            <Input v-model="formEdit.key" placeholder="请输入配置项，必填"/>
          </FormItem>
          <FormItem label="value" prop="value">
            <Input type="textarea" maxlength="250" :rows="4" show-word-limit v-model="formEdit.value" placeholder="请输入配置值，必填"/>
          </FormItem>
        </Form>
      </Modal>
    </div>

    <!-- 添加配置域 -->
    <div>
      <Modal
        v-model="addModel"
        title="添加配置域"
        @on-ok="handelAdd"
        @on-cancel="cancelAdd"
      >
        <Form ref="formInlineAdd" label-colon :label-width="85" :model="formAdd" :rules="ruleInlineAdd">
          <FormItem label="配置域" prop="name">
            <Input v-model="formAdd.name" placeholder="请输入配置域，必填"/>
          </FormItem>
          <FormItem label="描述">
            <Input v-model="formAdd.desc"/>
          </FormItem>
        </Form>
      </Modal>
    </div>

    <!-- 添加配置项 -->
    <div>
      <Modal
        v-model="addModelConfig"
        title="添加配置域"
        @on-ok="handelAddConfig"
        @on-cancel="cancelAddConfig"
      >
        <Form ref="formInlineAddConfig" label-colon :label-width="85" :model="formAddConfig" :rules="ruleInlineAddConfig">
          <FormItem label="配置域" prop="name">
            <Select v-model="formAddConfig.name" clearable placeholder="请选择配置域">
              <Option v-for="item in configList" :value="item.name" :key="item.name">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="key" prop="key">
            <Input v-model="formAddConfig.key" placeholder="请输入配置项，必填"/>
          </FormItem>
          <FormItem label="value" prop="value">
            <Input type="textarea" maxlength="250" :rows="4" show-word-limit v-model="formAddConfig.value" placeholder="请输入配置值，必填"/>
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>

<script>
import {getConfigName,getAllConfig,getConfigByName,getConfigByKey,deleteConfig,
updateConfig,addName,addConfig,queryConfig} from '@/api/index'
export default {
  name: 'Home',
  data(){
    return {
      row: '',
      addModelConfig: false,
      formAddConfig: {
        name: '',
        key: '',
        value: ''
      },
      ruleInlineAddConfig: {
        name: [
          { required: true, message: '配置域不能为空'}
        ],
        key: [
          { required: true, message: '配置项不能为空'}
        ],
        value: [
          { required: true, message: '配置值不能为空'}
        ]
      },
      addModel: false,
      formAdd: {
        name: '',
        desc: ''
      },
      ruleInlineAdd: {
        name: [
          { required: true, message: '配置项不能为空'}
        ]
      },
      ruleInline: {
        key: [
          { required: true, message: '配置项不能为空'}
        ],
        value: [
          { required: true, message: '配置值不能为空'}
        ]
      },
      formEdit: {
        name: '',
        key: '',
        value: ''
      },
      loadingEdit: false,
      editModel: false,
      loading: false,
      show: false,
      formSearch: {
        name: '',
        key:''
      },
      configList:[],
      loading: false,
      tableData: [],
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '配置域',
          key: 'name',
          minWidth: 200
        },
        {
          title: 'key',
          key: 'key',
          minWidth: 150
        },
        {
          title: 'value',
          key: 'value',
          minWidth: 150
        },
        {
          title: '创建时间',
          key: 'createTime',
          minWidth: 170
        },
        {
          title: '修改时间',
          key: 'updateTime',
          minWidth: 170
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.editModel = true
                    this.formEdit = {...params.row}
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '删除配置',
                      content: '您确认要删除配置：<strong>'+params.row.key+'</strong> 吗?',
                      onOk: () => {
                        deleteConfig(params.row.name,params.row.key).then(res =>{
                          if(res.code == "00"){
                            this.$Message.success('删除成功');
                            this.getgetAllConfigList();
                          }
                        })
                      }
                    })
                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
    }
  },
  methods:{
    getConfigNames(){
      getConfigName().then(res => {
        console.log(res);
        this.configList = res.data;
      }).catch((err)=>{
        console.log(err);
      })
    },
    getgetAllConfigList(){
      this.formSearch = {
        name: '',
        key: ''
      }
      this.loading = true
      getAllConfig().then(res => {
        console.log(res);
        this.tableData = res.data
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    querySearch(){
      
      if(this.formSearch.name == undefined){
        this.formSearch.name = '';
      }
      if(this.formSearch.key == undefined){
        this.formSearch.key = '';
      }
      this.loading = true
      queryConfig(
        this.formSearch.name,
        this.formSearch.key
      ).then(res => {
        console.log(res);
        this.tableData = res.data
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })

    },
    handleEdit(){
      this.$refs['formInlineEdit'].validate((valid) => {
        if(valid){
          console.log(this.formEdit);
          updateConfig(
            this.formEdit.name,
            this.formEdit.key,
            this.formEdit.value
          ).then(res => {
            this.$Message.success('修改成功');
            this.getgetAllConfigList();
          })
        }
      })
    },
    cancelEdit(){
      this.formEdit = {
        name: '',
        key: '',
        value: '',
      }
      this.$refs.formInlineEdit.resetFields()
    },
    handelAdd(){
      this.$refs['formInlineAdd'].validate((valid) => {
        if(valid){
          addName(
            this.formAdd.name,
            this.formAdd.desc
          ).then(res => {
            this.$Message.success('添加配置域成功');
            this.cancelAdd();
            this.getConfigNames();
          })
        }
      })
    },
    cancelAdd(){
      this.formAdd = {
        name: '',
        desc: ''
      }
      this.$refs.formInlineAdd.resetFields()
    },
    handelAddConfig(){
      this.$refs['formInlineAddConfig'].validate((valid) => {
        if(valid){
          addConfig(
            this.formAddConfig.name,
            this.formAddConfig.key,
            this.formAddConfig.value
          ).then(res => {
            this.$Message.success('添加配置项成功');
            this.cancelAddConfig();
            this.getgetAllConfigList();
          })
        }
      })
    },
    cancelAddConfig(){
      this.formAddConfig = {
        name: '',
        key: '',
        value: ''
      }
      this.$refs.formInlineAddConfig.resetFields()
    },
    handleContextMenu(row){
      this.row = row;
    },
    handleContextMenuEdit(){
      this.editModel = true
      this.formEdit = {...this.row}
    },
    handleContextMenuDelete(){
      this.$Modal.confirm({
        title: '删除配置',
        content: '您确认要删除配置：<strong>'+this.row.key+'</strong> 吗?',
        onOk: () => {
          deleteConfig(this.row.name,this.row.key).then(res =>{
            if(res.code == "00"){
              this.$Message.success('删除成功');
              this.getgetAllConfigList();
            }
          })
        }
      })
    }
  },
  mounted(){
    this.getConfigNames();
    this.getgetAllConfigList();
  }
}
</script>

<style lang="less" scoped>
.home-wrapper{
  padding: 5px;
  .tool-box{
    text-align: right;
  }
}
</style>
